function Getproto(){
    
    this.banner2 = document.getElementsByClassName("banner2")[0];
    this.banner = document.getElementsByClassName("banner")[0];
    this.banner_li = this.banner.children;
    this.dotted = document.getElementsByClassName("dotted")[0];
    this.dotted_li = this.dotted.children;
    this.toleft = document.getElementById("toLeft");
    this.toright = document.getElementById("toRight");
    this.timer = null;
    this.index = 0;
}

Getproto.prototype.init = function(){
    this.bannerLb();
    this.bannerOver();
    this.bannerOut();
    this.onmouOver();
    this.btnLeft();
    this.btnRight();
}

Getproto.prototype.bannerLb = function(){

    this.timer = setInterval(() => {
        if(this.index == 4){
            this.index = 0;
        }else{
            this.index++;
        }

        for(let i=0 ; i<this.banner_li.length; i++){
            animate(this.banner_li[i],{opacity:0},30);

            this.dotted_li[i].className = "";
        }

        animate(this.banner_li[this.index],{opacity:100});
        this.dotted_li[this.index==5?0:this.index].className = "active";
    }, 2000);
    return this;
}

Getproto.prototype.bannerOver = function(){
    this.banner2.onmouseover = () => {
        clearInterval(this.timer);
        // console.log(111)
    }
}

Getproto.prototype.bannerOut = function(){
    this.banner2.onmouseout = () => {
        this.bannerLb();
    }
}

Getproto.prototype.onmouOver = function(){
    for(let i=0; i<this.dotted_li.length; i++){
        this.dotted_li[i].onmouseover = () => {
            this.index = i ;
            for(let j=0; j<this.dotted_li.length; j++){
                this.dotted_li[j].className = "";
                animate(this.banner_li[j],{opacity:0},30);
            }
            animate(this.banner_li[this.index],{opacity:100})
            this.dotted_li[this.index].className = "active";
        }
    }
}

Getproto.prototype.btnLeft = function(){
    this.toleft.onclick = () => {
        if(this.index === 0){
            this.index = 0;
        }else{
            this.index--;
        }

        this.btnGong();

    }
}

Getproto.prototype.btnRight = function(){
    this.toright.onclick = () => {
        if(this.index === 4){
            this.index = 4;
        }else{
            this.index++;
        }

        this.btnGong();

    }
}

Getproto.prototype.btnGong = function(){
    for(let i=0; i<this.dotted_li.length; i++){
        this.dotted_li[i].className = "";
        animate(this.banner_li[i],{opacity:0},30);
    }
    animate(this.banner_li[this.index],{opacity:100});
    this.dotted_li[this.index].className = "active";
}

new Getproto().init();